<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>阿里OCR文字识别</title>
  <link href="__CDN__/assets/css/frontend{$Think.config.app_debug?'':'.min'}.css?v={$Think.config.site.version}" rel="stylesheet">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
  <!--[if lt IE 9]>
  <script src="__CDN__/assets/js/html5shiv.js"></script>
  <script src="__CDN__/assets/js/respond.min.js"></script>
  <![endif]-->
</head>
<body>

<!-- Content -->
<div class="container">
  <div class="clearfix">
    <div class="row">
      <div class="col-lg-12">
        <div class="page-header">
          <h2 id="navbar">阿里OCR文字识别</h2>
        </div>
        <div class="">
          <form id="ocr-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:addon_url('aliocr/index/ocr')}">
            <div class="form-group">
              <label for="c-ocrType" class="control-label col-xs-12 col-sm-1">图片类型:</label>
              <div class="col-xs-12 col-sm-8">
                <select  id="c-ocrType" data-rule="required" class="form-control" name="row[ocrType]">
                  {foreach name="ocrTypeList" item="vo"}
                  <option value="{$key}">{$vo}</option>
                  {/foreach}
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-xs-12 col-sm-1">识别图片:</label>
              <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                  <input id="c-image" data-rule="required" class="form-control" size="50" name="row[image]" type="text" value="">
                  <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                  </div>
                  <span class="msg-box n-right" for="c-image"></span>
                </div>
                {if $isUploadTips}
                <p style="color: red;">注：此页面为前台页面，需先以用户身份登录前台后，才能上传图片。(<a href="{:url('index/user/login', '', false, true);}">{:url('index/user/login', '', false, true);}</a>)</p>
                {/if}
                <ul class="row list-inline plupload-preview" id="p-image"></ul>
              </div>
            </div>
            <div class="form-group layer-footer">
              <label class="control-label col-xs-12 col-sm-1"></label>
              <div class="col-xs-12 col-sm-8">
                <button type="submit" class="btn btn-primary btn-embossed disabled">开始识别</button>
              </div>
            </div>
          </form>
        </div>
        <legend>识别结果</legend>
        <div id="ocr-success" class="hidden ocr-result alert alert-success-light" role="alert">识别成功</div>
        <div id="ocr-faild" class="hidden ocr-result alert alert-danger-light" role="alert">识别失败</div>
        <textarea id="result" cols="30" rows="17" class="form-control"></textarea>
      </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var require = {
    config: {$jsconfig|json_encode}
  };
</script>
<script>
  require.callback = function () {
    define('aliocr', ['jquery', 'bootstrap', 'frontend', 'form'], function ($, undefined, Frontend, Form) {
      var Controller = {
        index: function () {
          Form.api.bindevent("#ocr-form", function success(data, ret) {
            $("#ocr-success").removeClass("hidden");
            $("#ocr-faild").addClass("hidden");
            var result = ret.data;
            var show = '';
            for (let i = 0; i < result.length; i ++) {
              var line = result[i].cn + (result[i].cn ? '：' : '') + result[i].value;
              show += line + '\n';
            }
            $('#result').text(show);
          }, function error(data, ret) {
            $("#ocr-faild").removeClass("hidden");
            $("#ocr-success").addClass("hidden");
            $("#result").text(ret.msg);
          });
        }
      };
      return Controller;
    });
  };
</script>
<script src="__CDN__/assets/js/require{$Think.config.app_debug?'':'.min'}.js" data-main="__CDN__/assets/js/require-frontend{$Think.config.app_debug?'':'.min'}.js?v={$site.version}"></script>
</body>
</html>
